<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="manage" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<manage:page title="配送单详情">
    <jsp:attribute name="css">
        <style type="text/css">
            .showFom {
                display: none;;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
         <script type="text/javascript"
                 src="http://api.map.baidu.com/api?v=2.0&ak=CsOIv1Yd0mQowBwXM5BxQuK1hl1EtTB1"></script>
         <script type="text/javascript" src="static-resources/layer/layer.js"></script>
       <script>
           $('.ui.form').form({
               fields: {
                   name: 'empty',
                   idx: 'empty'

               }
           });
           $(function () {
               $(".reason-selector select").dropdown({
                   fullTextSearch: true
               });
           })

           function showFunction(id) {
               $(".allCss").addClass("showFom");
               $("#" + id + "").removeClass("showFom");
               $(".allHead").removeClass("active");
               $("." + id + "").addClass("active");

           }
       </script>
         <script type="text/javascript">

             $(function () {
                 var entityName = $("#entityName").val();
                 var startDate = $("#startDate").val();
                 var endDate = $("#endDate").val();
                 if (entityName == null || entityName == undefined || entityName == "" ||
                         startDate == null || startDate == undefined || startDate == "" ) {
                     return;
                 }
                 $.ajax({
                     url: '/delivery/getMaps.do',
                     data: {"entityName": entityName, "startDate": startDate, "endDate": endDate},
                     type: 'post',
                     dataType: 'json',
                     success: function (data) {
                         if (data.code == 0) {
                             var val = data.data;
                             for (var i = 0; i <= val.length; i++) {
                                 dynamicLine(val[i].longitude, val[i].latitude);
                             }

                         }

                     }, error: function () {
                         alert("系统异常！");
                     }
                 });

             });
             // 获取随机数
             function getRandom(n) {
                 return Math.floor(Math.random() * n + 1)
             }

             //在轨迹点上创建图标，并添加点击事件，显示轨迹点信息。points,数组。
             function addMarker(points) {
                 var pointsLen = points.length;
                 if (pointsLen == 0) {
                     return;
                 }
                 var myIcon = new BMap.Icon("track.ico", new BMap.Size(5, 5), {
                     offset: new BMap.Size(5, 5)
                 });

                 // 创建标注对象并添加到地图
                 for (var i = 0; i < pointsLen; i++) {
                     var point = new BMap.Point(points[i].lng, points[i].lat);
                     var marker = new BMap.Marker(point, {icon: myIcon});
                     map.addOverlay(marker);
                 }
             }

             //添加线
             function addLine(points) {
                 var linePoints = [], pointsLen = points.length, i, polyline;
                 if (pointsLen == 0) {
                     return;
                 }
                 // 创建标注对象并添加到地图
                 for (i = 0; i < pointsLen; i++) {
                     linePoints.push(new BMap.Point(points[i].lng, points[i].lat));
                 }
                 polyline = new BMap.Polyline(linePoints, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
                 map.addOverlay(polyline);   //增加折线
             }
             //随机生成新的点，加入到轨迹中。
             function dynamicLine(lng, lat) {
                 /* var lng = 100+getRandom(40);
                  var lat = 35+getRandom(30);*/
                 var id = getRandom(1000);
                 var point = {"lng": lng, "lat": lat, "status": 1, "id": id}
                 var makerPoints = [];
                 var newLinePoints = [];
                 var len;
                 makerPoints.push(point);
                 addMarker(makerPoints);//增加对应该的轨迹点
                 points.push(point);
                 bPoints.push(new BMap.Point(lng, lat));
                 len = points.length;
                 newLinePoints = points.slice(len - 2, len);//最后两个点用来画线。

                 addLine(newLinePoints);//增加轨迹线
                 setZoom(bPoints);
                 /*  setTimeout(dynamicLine, 1000);*/
             }
             //根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
             function setZoom(bPoints) {
                 var view = map.getViewport(eval(bPoints));
                 var mapZoom = view.zoom;
                 var centerPoint = view.center;
                 map.centerAndZoom(centerPoint, mapZoom);
             }
             //数据准备,
             var points = [];//原始点信息数组
             var bPoints = [];//百度化坐标数组。用于更新显示范围。
             //地图操作开始
             var map = new BMap.Map("container");
             map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5); //初始显示中国。
             map.enableScrollWheelZoom();//滚轮放大缩小
             /*setTimeout(dynamicLine, 1000)*/
             ;//动态生成新的点。
         </script>

</jsp:attribute>
    <jsp:body>
        <%-- deliverySearchResponseVo.deliveryAdditionalStatus.value==1 &&--%>
        <div class="ui container" style="display: block;margin-top: 5px;">
            <br>
            <div class="ui breadcrumb" style="overflow-x: auto">
                <a class="active section">配送单详情</a><br><br>
                <div class="ui top attached tabular menu">
                    <c:forEach var="deliverySearchResponseVo" items="${deliverySearchResponseVos}" varStatus="status">
                        <a class="item <c:if test="${ status.last}">active</c:if> ${deliverySearchResponseVo.id} allHead"
                           onclick="showFunction('${deliverySearchResponseVo.id}')">第${status.count}次配送</a>
                    </c:forEach>
                </div>
            </div>
            <c:forEach var="deliverySearchResponseVo" items="${deliverySearchResponseVos}" varStatus="status">
                <form class="ui form allCss <c:if test="${!status.last}">showFom</c:if> " method="get"
                      id="${deliverySearchResponseVo.id}">
                    <div class="ui raised segment">
                        <a class="ui blue ribbon label">第${status.count}配送单信息</a><br><br>
                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>订单编号</label>
                                    <input type="text" value="${deliverySearchResponseVo.orderCode}"
                                           placeholder="订单编号">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>配送单号</label>
                                    <input type="text" value="${deliverySearchResponseVo.deliveryCode}"
                                           placeholder="配送单号">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>订单来源</label>
                                    <input type="text" value="${deliverySearchResponseVo.orderSource}"
                                           placeholder="订单来源">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>优先级</label>
                                    <input type="text" value="${deliverySearchResponseVo.deliveryPriority.description}"
                                           placeholder="优先级">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>配送员</label>
                                    <input type="text" value="${deliverySearchResponseVo.deliveryUserName}"
                                           placeholder="配送员">
                                </div>
                            </div>
                        </div>
                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>配送状态</label>
                                    <input type="text" value="${deliverySearchResponseVo.shipStatus.description}"
                                           placeholder="配送状态">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>签收类别</label>
                                    <input type="text" value="${deliverySearchResponseVo.signType.description}"
                                           placeholder="签收类别">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>非正常签收理由</label>
                                    <input type="text" value="${deliverySearchResponseVo.reason}"
                                           placeholder="非正常签收理由">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>门店编号</label>
                                    <input type="text" value="${deliverySearchResponseVo.depotCode}"
                                           placeholder="门店编号">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>门店名称</label>
                                    <input type="text" value="${deliverySearchResponseVo.depotName}"
                                           placeholder="门店名称">
                                </div>
                            </div>

                        </div>
                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>配送费</label>
                                    <input type="text" value="${deliverySearchResponseVo.deliveryFee}"
                                           placeholder="配送费">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>到达备注</label>
                                    <input type="text" value="${deliverySearchResponseVo.arriveRemark}"
                                           placeholder="到达备注">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>完成备注</label>
                                    <input type="text" value="${deliverySearchResponseVo.completeRemark}"
                                           placeholder="完成备注">
                                </div>
                            </div>
                        </div>
                        <a class="ui blue ribbon label">商品信息</a><br><br>
                        <c:if test="${ status.last}">
                            <div class="ui container">
                                <table class="ui striped table celled">
                                    <thead>
                                    <tr>
                                        <th>
                                            <h4>商品编号</h4>
                                        </th>
                                        <th>
                                            <h4>商品名称</h4>
                                        </th>
                                        <th>
                                            <h4>商品单价(元)</h4>
                                        </th>
                                        <th>
                                            <h4>配送数量</h4>
                                        </th>
                                        <th>
                                            <h4>配送总价(元)</h4>
                                        </th>
                                        <th>
                                            <h4>签收数量</h4>
                                        </th>
                                        <th>
                                            <h4>签收总价(元)</h4>
                                        </th>
                                    </tr>
                                    </thead>
                                    <c:forEach var="productItemVo"
                                               items="${deliverySearchResponseVo.deliveryProductVo.productItemVos}">
                                        <tr>
                                            <td><c:out value="${productItemVo.productCode}"/></td>
                                            <td><c:out value="${productItemVo.productName}"/></td>
                                            <td><c:out value="${productItemVo.price/100}"/></td>
                                            <td><c:out value="${productItemVo.quantity}"/></td>
                                            <td><c:out value="${productItemVo.totalAmount/100}"/></td>
                                            <td><c:out value="${productItemVo.validQuantity}"/></td>
                                            <td><c:out value="${productItemVo.validTotalAmount/100}"/></td>
                                        </tr>
                                    </c:forEach>
                                    <tr style="background-color:#EFEFEF">
                                        <td>合计：</td>
                                        <td></td>
                                        <td></td>
                                        <td><c:out
                                                value="${deliverySearchResponseVo.deliveryProductVo.allQuantity}"/></td>
                                        <td><c:out
                                                value="${deliverySearchResponseVo.deliveryProductVo.allTotalAmount/100}"/></td>
                                        <td><c:out
                                                value="${deliverySearchResponseVo.deliveryProductVo.allValidQuantity}"/></td>
                                        <td><c:out
                                                value="${deliverySearchResponseVo.deliveryProductVo.allValidTotalAmount/100}"/></td>
                                    </tr>
                                </table>
                            </div>
                            <br>
                        </c:if>


                        <a class="ui blue ribbon label">收货人信息</a><br><br>
                        <div class="four fields">
                            <div class="field">
                                <div class="field">
                                    <label>收货人</label>
                                    <input type="text" value="${deliverySearchResponseVo.receiverName}"
                                           placeholder="收货人">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>收货手机</label>
                                    <input type="text" value="${deliverySearchResponseVo.receiverMobile}"
                                           placeholder="收货手机">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>收货地址</label>
                                    <input type="text" value="${deliverySearchResponseVo.receiverAddress}"
                                           placeholder="收货地址">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>客户备注</label>
                                    <input type="text" value="${deliverySearchResponseVo.customerMark}"
                                           placeholder="客户备注">
                                </div>
                            </div>
                        </div>
                        <div class="four fields">
                            <div class="field">
                                <div class="field">
                                    <label>省</label>
                                    <input type="text" value="${deliverySearchResponseVo.areaState}"
                                           placeholder="省">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>市</label>
                                    <input type="text" value="${deliverySearchResponseVo.areaCity}"
                                           placeholder="市">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>区(县)</label>
                                    <input type="text" value="${deliverySearchResponseVo.areaDistrict}"
                                           placeholder="区(县)">
                                </div>
                            </div>
                        </div>
                        <a class="ui blue ribbon label">配送操作日期</a><br><br>
                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>本地创建时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.modified}"
                                           placeholder="订单生成日期">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>中台创建时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.createTime}"
                                           placeholder="本地创建时间">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>要求送货时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.sendTimeContent}"
                                           placeholder="要求送货时间">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>接单时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.getTime}"
                                           placeholder="接单时间">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>出发时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.startTime}"
                                           placeholder="出发时间">
                                </div>
                            </div>
                        </div>

                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>送达时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.sendingTime}"
                                           placeholder="送达时间">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>签收时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.completeTime}"
                                           placeholder="签收时间">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>延时签收时间</label>
                                    <input type="text" value="${deliverySearchResponseVo.delayDeliveryTime}"
                                           placeholder="签收时间">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>是否迟到</label>
                                    <input type="text" value="${deliverySearchResponseVo.isLate}"
                                           placeholder="是否迟到">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>到达迟到分钟</label>
                                    <input type="text" value="${deliverySearchResponseVo.sendErrorTime}"
                                           placeholder="到达迟到时间">
                                </div>
                            </div>
                        </div>

                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>是否超时</label>
                                    <input type="text" value="${deliverySearchResponseVo.isLateTime}"
                                           placeholder="是否超时">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>签收迟到分钟</label>
                                    <input type="text" value="${deliverySearchResponseVo.signErrorTime}"
                                           placeholder="签收迟到时间">
                                </div>
                            </div>
                        </div>

                        <a class="ui blue ribbon label">配送操作经纬度</a><br><br>
                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>接单经纬度</label>
                                    <input type="text" value="${deliverySearchResponseVo.getLongitudeLatitude}"
                                           placeholder="接单经纬度">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>出发经纬度</label>
                                    <input type="text" value="${deliverySearchResponseVo.startLongitudeLatitude}"
                                           placeholder="出发经纬度">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>到达经纬度</label>
                                    <input type="text" value="${deliverySearchResponseVo.arriveLongitudeLatitude}"
                                           placeholder="到达经纬度">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>签收经纬度</label>
                                    <input type="text" value="${deliverySearchResponseVo.completeLongitudeLatitude}"
                                           placeholder="签收经纬度">
                                </div>
                            </div>
                        </div>

                        <div class="five fields">
                            <div class="field">
                                <div class="field">
                                    <label>到达误差距离</label>
                                    <input type="text" value="${deliverySearchResponseVo.sendErrorDistance}"
                                           placeholder="到达误差距离">
                                </div>
                            </div>
                            <div class="field">
                                <div class="field">
                                    <label>签收误差距离</label>
                                    <input type="text" value="${deliverySearchResponseVo.signErrorDistance}"
                                           placeholder="签收误差距离">
                                </div>
                            </div>
                        </div>
                        <br>

                        <a class="ui blue ribbon label">出发时间-完成时间轨迹</a><br><br>
                        <span>百度地图</span>
                        <c:if test="${ status.last}">
                            <input type="hidden" value="${deliverySearchResponseVo.userId}" id="entityName">
                            <input type="hidden" value="${deliverySearchResponseVo.startTime}" id="startDate">
                            <input type="hidden" value="${deliverySearchResponseVo.completeTime}" id="endDate">
                            <div style="margin:auto;">
                                <div id="container"
                                     style="
                                    margin-top:5px;
                                    width: 1100px;
                                    height: 600px;
                                    top: 10px;
                                    border: 1px solid gray;
                                    overflow:hidden;">
                                </div>
                            </div>
                        </c:if>
                        <br>

                        <a class="ui blue ribbon label">配送上传图片</a><br><br>
                        <c:if test="${ status.last}">
                            <c:forEach var="deliveryArrivePictureVo"
                                       items="${deliverySearchResponseVo.deliveryArrivePictureVos}">
                                <div class="ui img" style="overflow-x: auto ">
                                    <img src="${deliveryArrivePictureVo.imgUrl}" width="400px" height="500px"/>
                                </div>
                                <div class="five fields">
                                    <div class="field">
                                        <div class="field">
                                            <label>照片名</label>
                                            <input type="text" value="${deliveryArrivePictureVo.pictureName}"
                                                   placeholder="名称">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="field">
                                            <label>创建时间</label>
                                            <input type="text" value="${deliveryArrivePictureVo.createTime}"
                                                   placeholder="创建时间">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="field">
                                            <label>照片经度</label>
                                            <input type="text" value="${deliveryArrivePictureVo.longitude}"
                                                   placeholder="照片经度">
                                        </div>
                                    </div>
                                    <div class="field">
                                        <div class="field">
                                            <label>照片纬度</label>
                                            <input type="text" value="${deliveryArrivePictureVo.latitude}"
                                                   placeholder="照片纬度">
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </c:if>
                    </div>
                </form>
            </c:forEach>
        </div>
    </jsp:body>

</manage:page>
